<template>
	<div>
		<form action="/">
		  <van-search
			id='van-search'
		    v-model="value"
		    show-action
		    placeholder="请输入搜索关键词"
		    @search="onSearch"
		    @cancel="onCancel"
		  />
		</form>
		<div class="betterscroll" :style="{height:height}">
			<ul class="moveda">
				<li v-for="item in computedlist" :key="item.cinemaId" class="cinema_detail">
					<div>
						<span class='cinema_name'>{{item.name}}</span>
						<span class='cinema_adress'>{{item.address}}</span>
					</div>
					<div>
						<span class='cinema_price'>￥{{item.lowPrice/100}}起</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import obj from '@/util/mixIn.js'
	export default {
	  mixins:[obj],
	  data() {
	    return {
	      value: '',
		  height:'0px'
	    };
	  },
	  methods: {
	    onSearch(val) {
	      Toast(val);
	    },
	    onCancel() {
	      this.$router.back();
	    }
	  },
	  computed:{
		  computedlist(){
			  if(this.value =='')return;
			  return this.$store.state.cinema.filter(item => item.name.toUpperCase().includes(this.value.toUpperCase())||item.address.toUpperCase().includes(this.value.toUpperCase()))
		  }
	  },
	  mounted(){
	  	this.height = document.documentElement.clientHeight - document.querySelector('#footer').offsetHeight - document.querySelector('#van-search').offsetHeight+ 'px';
	  	if(this.$store.state.cinema.length == 0){
	  		this.$store.dispatch('getCinemaData', this.$store.state.cityId)
	  	}
	  }
	}
</script>

<style>
	.moveda{
		overflow: hidden;
	}
	.cinema_detail{
		width: 100%;
		height: 3.71875rem;
		display: flex;
		padding: 0.625rem;
		padding-bottom: 1.25rem;
	}
	.cinema_detail>div:nth-child(1){
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.cinema_detail>div:nth-child(2){
		width: 3.5rem;
		margin-right: 0.625rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
	.cinema_name{
		color: #000000;
		font-size: 16px;
	}
	.cinema_adress{
		color: #797D82;
		font-size: 14px;
		width: 15.625rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.cinema_price{
		color: orange;
		font-size: 15px;
	}
	.betterscroll{
		overflow: auto;
		position: relative;
	}
</style>
